<!DOCTYPE html>
<html>
<head>
	<title>编辑-修改封面</title>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<meta content="yes" name="apple-mobile-web-app-capable">
	<meta content="yes" name="apple-touch-fullscreen">
	<meta content="telephone=no,email=no" name="format-detection">
	<link rel="stylesheet" href="__ROOT__/Apps/WebApp/View/default/css/normalize.css" type="text/css">
	<link rel="stylesheet" href="__ROOT__/Apps/WebApp/View/default/css/cover.css" type="text/css">
	<script type="text/javascript" src="__ROOT__/Apps/WebApp/View/default/js/jquery-1.7.2.min.js"></script>
	<script type="text/javascript" src="__ROOT__/Apps/WebApp/View/default/js/jisuan.js">

	</script>
	<link rel="stylesheet" type="text/css" href="__ROOT__/Apps/WebApp/View/default/css/tipdisapply.css">
<style type="text/css">


	.center{
		width: 3.893333rem;
		height: 6.4rem;
		float: left;
		margin-right: 0.053333rem;
		margin-bottom: 0.586667rem;
		position: relative;
		margin-left:0.24rem;
		background:#fff;
	}
	.center:nth-of-type(1),.center:nth-of-type(3){
		margin-left:0;
	}
	.center_main{
		width:100%;
		height:5.653333rem;
		position: relative;
		background: #FFFFFF;
		box-shadow: 0 1px 6px 0 rgba(140,140,140,0.50);
	}
	.text{
		width:3.6rem;
		height:auto;
		position: absolute;
		top:0.4rem;
		padding-right:0.266667rem;

		font-size: 0.13333rem;
		color: #3C3C3C;
		text-align: right;
	}
	.book{
		padding-top: 0.533333rem;
		height: 3.866667rem;
		width: 100%;
		position: absolute;
		top:0.9rem;
		left:0;
	}
	.bookimg{
		width:100%;
		height:100%;
	}
	.img{
		width:100%;
		height:100%;
	}
	.booktext{
		width:100%;
		height: auto;
		text-align: center;
		font-size: 0.32rem;
		color: #323232;
		margin-top:0.32rem;
	}
	.bookZhao{
		width:100%;
		height:100%;
		position: absolute;
		top:0;
		left:0;
		display: none;

	}
	.bookBack{
		width:100%;
		height:100%;
		background: #000;
		opacity: 0.5;
		z-index: 5;
	}
	.zhaoImg{
		width:0.86rem;
		height:0.72rem;
		position: absolute;
		top:1.84rem;
		left:1.573333rem;
		z-index: 6;
		color:#fff;

	}
	.zhaoText{
		position: absolute;
		z-index: 6;
		top:2.906667rem;
		width:100%;
		text-align: center;
		height:auto;
		font-size: 0.32rem;
		color: #FFFFFF;
		opacity: .8;
	}
	.none{
		display: none;
	}

	.text1{
		top:0.8rem;
	}
	.book1{
		height: 3.066667rem;
		padding-top: 0.8rem;
		top:1.6rem;
	}

	.text2{
		top:0.4rem;
	}
	.book2{
		width:2.613333rem;
		height:4.133333rem;
		left:1.28rem;
	}
	.text3{
		top:3.066667rem;
	}
	.book3{
		padding-top:0;
		top:0;
		height:100%;
		width:100%;
	}
	.centerMain{
		width:100%;
		height:5.653333rem;
		position: relative;
	}

	.insert_img{
		position: absolute;
	}
	.insertCenter{
		width:100%;
		height:5.653333rem;
		position: relative;
	}
	.fourTime{
		position: absolute;
		top:0;
		left:3.466667rem;
		width:0.266667rem;
		height:auto;
		font-size:0.24rem;
		color:#626262;
		word-wrap: break-word;
		letter-spacing: 0.533333rem;
		font-family: ziti;
	}
	.write{
		background: #fff;
	}
	.regain_right{
		left:8.066rem;
	}
</style>

</head>
<body>
	<div class="container">
		<div class="cover_container">
			<div class="cover_main">
				<div class="input_text">
					<div class="input_text_top clear">
						<img src="__ROOT__/Apps/WebApp/View/default/images/edit_modify_the_cover_icon (2).png" style="width:0.64rem;height:0.64rem;float:left">
						<a style="display:inline-block;float:left;line-height:0.64rem;padding-left:0.133333rem;font-family: PingFangSC-Medium;font-size: 0.32rem;color: #646464;">修改封面</a>
					</div>
					<div class="input_text_bot">
						<div class="bookname">
							<div class="bookname_top">
								<img src="__ROOT__/Apps/WebApp/View/default/images/edit_modify_the_cover_title_icon.png" style="width:0.64rem;height:0.64rem;float:left;"><a style="display:inline-block;float:left;line-height:0.586667rem;padding-left:0.133333rem;font-family: PingFangSC-Medium;font-size: 0.32rem;color: #A0A0A0;">书名</a>
							</div>
							<div class="bookname_input">
								<input id="bookname" type="text" name="bookname" class="bookInput" style="background:transparent" value="{$cover.bookname}">
							</div>
						</div>
						<div class="writername">
							<div class="writername_top">
								<img src="__ROOT__/Apps/WebApp/View/default/images/edit_modify_the_cover_author_icon.png" style="width:0.64rem;height:0.64rem;float:left;"><a style="display:inline-block;float:left;line-height:0.586667rem;padding-left:0.133333rem;font-family: PingFangSC-Medium;font-size: 0.32rem;color: #A0A0A0;">作者</a>
							</div>
							<div class="writername_input">
								<input  id="writer" type="text" name="bookname" class="writerInput" style="background:transparent" value="{$cover.author}">
							</div>
						</div>
					</div>
				</div>
				<div class="spine">
					<div class="writername_top">
						<img src="__ROOT__/Apps/WebApp/View/default/images/edit_modify_the_cover_spine_icon.png" style="width:0.64rem;height:0.64rem;float:left;"><a style="display:inline-block;float:left;line-height:0.586667rem;padding-left:0.133333rem;font-family: PingFangSC-Medium;font-size: 0.32rem;color: #A0A0A0;">书脊</a>
					</div>
					<div class="spine_img">
						<div class="spine_header">个性<a>默认</a>书脊按照内容的时间范围私人订制</div>
						<div class="spine_main">
							<img src="__ROOT__/Apps/WebApp/View/default/images/edit_modify_the_cover_spine_photo.png" style="width:100%;height:100%;">
						</div>
					</div>
				</div>
				<div class="cover_format">
					<div class="cover_format_img">
						<img src="__ROOT__/Apps/WebApp/View/default/images/edit_modify_the_cover_select_the_cover_layout_icon.png" style="width:0.64rem;height:0.64rem;float:left">
						<a style="display:inline-block;line-height:0.64rem;font-family: PingFangSC-Regular;font-size: 0.32rem;color: #A0A0A0;float:left;padding-left:0.08rem;">选择封面版式</a>
						<am style="display:inline-block;line-height:0.64rem;font-family: PingFangSC-Regular;font-size:0.32rem;color:#29A3DA;float:right;">往日时光</am>
					</div>
					<div class="cover_format_book clear">
						<!--<foreach name="cover" item="vo" key="ko">-->

						<!--<div class="{$vo.css1}" onclick="getcover(this)" id="{$ko+1}">-->
							<!--<div class="two_book">-->
								<!--<div class="two_book_cover">-->
									<!--<a class="one">我们的{$vo.covername}</a>-->
									<!--<a class="two">请叫我宝宝哥·作品</a>-->
									<!--<div class="{$vo.css2}">-->
										<!--<img src="__ROOT__/Apps/WebApp/View/default/images/{$vo.images}" style="width:100%;height:100%;">-->
									<!--</div>-->
								<!--</div>-->
								<!--<if condition="$ko eq 0">-->
								<!--<div class="two_book_img"style="display:block;"><img src="__ROOT__/Apps/WebApp/View/default/images/edit_modify_the_cover_select_the_cover_layout_sel.png" class="opacity"></div>-->
									<!--<else/><div class="two_book_img"><img src="__ROOT__/Apps/WebApp/View/default/images/edit_modify_the_cover_select_the_cover_layout_sel.png" class="opacity">-->
								<!--</div></if>-->
							<!--</div>-->
							<!--<a class="three" style="color:#7D7D7D;">{$vo.covername}</a>-->
						<!--</div></foreach>-->
						<input type="hidden" id="defaultcss" value="{$cover.css}">
						<foreach name="css" item="vo">
						<div class="center" onclick="getcss(this)" id="{$vo.id}">
							<div class="centerMain">
								<div class="center_main">
									<div class="{$vo.css1}" >
										<div class="textname">

											<div style="width:auto;height:auto;font-family: HansHandItalic;font-size: 0.266667rem;color: #3C3C3C;font-weight:normal;">我们的往日时光</div>
											<div style="width:auto;color:#3C3C3C;height:auto;">{$cover.author}·作品</div>
										</div>
									</div>

									<div class="{$vo.css2}">
										<div class="bookimg">
											<img src="__ROOT__/Apps/WebApp/View/default/images/{$vo.img}" class="img absolute alt" alt="1">
										</div>
									</div>
								</div>

								<if condition="$cover['css'] eq $vo['id']">
									<div class="bookZhao cover" style="display:block">
										<div class="bookBack"></div>
										<div class="zhaoImg"><img src="__ROOT__/Apps/WebApp/View/default/images/edit_modify_the_cover_select_the_cover_layout_sel.png" class="img">
										</div>
										<div class="zhaoText">可更改封面</div>
									</div>
									<else/>
									<div class="bookZhao cover" style="display:none">
										<div class="bookBack"></div>
										<div class="zhaoImg"><img src="__ROOT__/Apps/WebApp/View/default/images/edit_modify_the_cover_select_the_cover_layout_sel.png" class="img">
										</div>
										<div class="zhaoText">可更改封面</div>
									</div>
								</if>

							</div>
							<div class="booktext">{$vo.name}</div>

						</div></foreach>


					</div>
				</div>
				<div class="cover_insert">
					<div class="cover_format_img">
						<img src="__ROOT__/Apps/WebApp/View/default/images/edit_modify_the_cover_sel_an_insert_icon.png" style="width:0.64rem;height:0.64rem;float:left">
						<a style="display:inline-block;line-height:0.64rem;font-family: PingFangSC-Regular;font-size: 0.32rem;color: #A0A0A0;float:left;padding-left:0.08rem;">插页</a>
						<am style="display:inline-block;line-height:0.64rem;font-family: PingFangSC-Regular;font-size:0.32rem;color:#29A3DA;float:right;">四季</am>
					</div>
					<div class="numb_one">每个月的第一页风格插页</div>
					<div class="cover_insert_center clear">
						<div class="insert_left" onclick="getinset(this)" id="you">
							<div class="insertCenter ">
								<div class="insert_img insert_choose">
									<div class="insert_top">
										<img src="__ROOT__/{$inset['img']}" style="width:100%;height:100%;">
									</div>
									<div class="fourTime">2017</div>

								</div>
								<input type="hidden" id="defaultinset" value="{$cover.inset}">
								<if condition="$cover['inset'] eq 1">
								<div class="bookZhao insert" style="display: block;">
									<div class="bookBack"></div>
									<div class="zhaoImg"><img src="__ROOT__/Apps/WebApp/View/default/images/edit_modify_the_cover_select_the_cover_layout_sel.png" class="img">
									</div>
									<div class="zhaoText">可更改封面</div>
								</div><else/>
									<div class="bookZhao insert" style="display: none;">
										<div class="bookBack"></div>
										<div class="zhaoImg"><img src="__ROOT__/Apps/WebApp/View/default/images/edit_modify_the_cover_select_the_cover_layout_sel.png" class="img">
										</div>
										<div class="zhaoText">可更改封面</div>
									</div>
								</if>

						</div><a class="four_seasons">四季(默认）</a></div>
						<div class="insert_right" onclick="getinset(this)" id="wu">
							<div class="insertCenter ">
								<div class="insert_img insert_choose write">
								</div>
								<if condition="$cover['inset'] eq 0">
								<div class="bookZhao insert" style="display:block;">
									<div class="bookBack"></div>
									<div class="zhaoImg"><img src="__ROOT__/Apps/WebApp/View/default/images/edit_modify_the_cover_select_the_cover_layout_sel.png" class="img">
									</div>
									<div class="zhaoText">可更改封面</div>
								</div><else/>
									<div class="bookZhao insert" style="display: none;">
										<div class="bookBack"></div>
										<div class="zhaoImg"><img src="__ROOT__/Apps/WebApp/View/default/images/edit_modify_the_cover_select_the_cover_layout_sel.png" class="img">
										</div>
										<div class="zhaoText">可更改封面</div>
									</div>
								</if>

						</div>
							<a class="four_seasons">不选择插页</a>

					</div>
				</div>
			</div>
				<div class="cover_insert" style="height: 16.733333rem;">
					<input type="hidden" id="defaultshade" value="{$cover.shade}">
					<div class="cover_format_img">
						<img src="__ROOT__/Apps/WebApp/View/default/images/edit_modify_the_cover_sel_an_insert_icon.png" style="width:0.64rem;height:0.64rem;float:left">
						<a style="display:inline-block;line-height:0.64rem;font-family: PingFangSC-Regular;font-size: 0.32rem;color: #A0A0A0;float:left;padding-left:0.08rem;">页脚</a>
					</div>
					<div class="numb_one">每页页脚的背景底图</div>
					<div class="cover_insert_center clear">
						<div class="insert_left" onclick="getshade(this)" id="shi1">
							<div class="insertCenter">
								<div class="insert_img shade_choose">
									<div class="insert_top">
										<img src="__ROOT__/Apps/WebApp/View/default/images/pbStyle/fun_even_3.png" style="width:100%;height:100%;">
									</div>
								</div>
								<if condition="$cover['shade'] eq 1">
								<div class="bookZhao shade" style="display: block;">
									<div class="bookBack"></div>
									<div class="zhaoImg"><img src="__ROOT__/Apps/WebApp/View/default/images/edit_modify_the_cover_select_the_cover_layout_sel.png" class="img">
									</div>
									<div class="zhaoText">选择页脚</div>
								</div><else/>
									<div class="bookZhao shade" style="display: none;">
										<div class="bookBack"></div>
										<div class="zhaoImg"><img src="__ROOT__/Apps/WebApp/View/default/images/edit_modify_the_cover_select_the_cover_layout_sel.png" class="img">
										</div>
										<div class="zhaoText">选择页脚</div>
									</div>
								</if>
							</div>
							<a class="four_seasons">缤纷(默认)</a>
						</div>
						<div class="insert_left" onclick="getshade(this)" id="shi2">
							<div class="insertCenter">
								<div class="insert_img shade_choose">
									<div class="insert_top">
										<img src="__ROOT__/Apps/WebApp/View/default/images/pbStyle/line_even_1.png" style="width:100%;height:100%;">
									</div>
								</div>
								<if condition="$cover['shade'] eq 2">
								<div class="bookZhao shade" style="display: block;">
									<div class="bookBack"></div>
									<div class="zhaoImg"><img src="__ROOT__/Apps/WebApp/View/default/images/edit_modify_the_cover_select_the_cover_layout_sel.png" class="img">
									</div>
									<div class="zhaoText">选择页脚</div>
								</div><else/>
									<div class="bookZhao shade" style="display: none;">
										<div class="bookBack"></div>
										<div class="zhaoImg"><img src="__ROOT__/Apps/WebApp/View/default/images/edit_modify_the_cover_select_the_cover_layout_sel.png" class="img">
										</div>
										<div class="zhaoText">选择页脚</div>
									</div>
								</if>
							</div>
							<a class="four_seasons">线条</a>
						</div>
						<div class="insert_left" onclick="getshade(this)" id="shi3">
							<div class="insertCenter">
								<div class="insert_img shade_choose">
									<div class="insert_top">
										<img src="__ROOT__/Apps/WebApp/View/default/images/pbStyle/natural_odd_4.png" style="width:100%;height:100%;">
									</div>
								</div>
								<if condition="$cover['shade'] eq 3">
								<div class="bookZhao shade" style="display: block;">
									<div class="bookBack"></div>
									<div class="zhaoImg"><img src="__ROOT__/Apps/WebApp/View/default/images/edit_modify_the_cover_select_the_cover_layout_sel.png" class="img">
									</div>
									<div class="zhaoText">选择页脚</div>
								</div><else/>
									<div class="bookZhao shade" style="display: none;">
										<div class="bookBack"></div>
										<div class="zhaoImg"><img src="__ROOT__/Apps/WebApp/View/default/images/edit_modify_the_cover_select_the_cover_layout_sel.png" class="img">
										</div>
										<div class="zhaoText">选择页脚</div>
									</div>
								</if>
							</div>
							<a class="four_seasons">自然</a>
						</div>
						<div class="insert_right" onclick="getshade(this)" id="fou">
							<div class="insertCenter ">
								<div class="insert_img shade_choose write">
								</div>
								<if condition="$cover['shade'] eq 0">
								<div class="bookZhao shade" style="display: block;">
									<div class="bookBack "></div>
									<div class="zhaoImg"><img src="__ROOT__/Apps/WebApp/View/default/images/edit_modify_the_cover_select_the_cover_layout_sel.png" class="img">
									</div>
									<div class="zhaoText">选择页脚</div>
								</div><else/>
									<div class="bookZhao shade" style="display: none;">
										<div class="bookBack "></div>
										<div class="zhaoImg"><img src="__ROOT__/Apps/WebApp/View/default/images/edit_modify_the_cover_select_the_cover_layout_sel.png" class="img">
										</div>
										<div class="zhaoText">选择页脚</div>
									</div>
								</if>
							</div>
							<a class="four_seasons">不选择页脚</a>

						</div>

					</div>
				</div>

		</div>
		<div class="edit_initial">
			<div class="regain_bot">
				<div class="regain_center">
					<div class="regain_left" onclick="back()">
						<img src="__ROOT__/Apps/WebApp/View/default/images/regain_back.png" style="width:100%;height:100%;">
					</div>
					<div class="regain_right" onclick="changecover()">
						<img src="__ROOT__/Apps/WebApp/View/default/images/regain_yes.png" style="width:100%;height:100%;">
					</div>
				</div>
			</div>
		</div>

	</div>
</body>
	<script type="text/javascript" src="__ROOT__/Apps/WebApp/View/default/js/list.js"></script>
	 <script type="text/javascript">

	 </script>

<script>
	window.cid='';
	window.iid='';
	window.sid='';
	$(document).ready(function(){
		var css=$('#defaultcss').val();
		var inset=$('#defaultinset').val();
		var shade=$('#defaultshade').val();
		cid=css;
		iid=inset;
		sid=shade;
		console.log(cid,iid,sid);
	})

	function getcss(params)//获取cssid
	{
	var cover = $(params).attr("id");
	cid = cover;
//alert(cid);
	}
	function getinset(params){
	var inset = $(params).attr("id");
		if(inset=='you'){
			inset=1;
		}
		else{
			inset=0;
		}
		iid = inset;
//		alert(iid);
	}

	function getshade(params)//获取插页id
	{
		var shade = $(params).attr("id");
		if(shade=='shi1'){
			sid=1;
		}else if(shade=='shi2'){
			sid=2;
		}else if(shade=='shi3'){
			sid=3;
		}else{
			sid=0;
		}
//		sid = shade;
//		alert(sid);
	}
	function changecover()
	{
		var goodsId=$('#goodsId').val();
		var bookname=document.getElementById('bookname').value;
		var author=document.getElementById('writer').value;
//		alert(bookname);alert(author);alert(iid);alert(cid);alert(sid)
		$.ajax({
			type: "get",//数据发送的方式（post 或者 get）
			url: " {:U('QqBooks/edit_cover')}",//要发送的后台地址
			data:{'cid':cid,'iid':iid,'bookname':bookname,'sid':sid,'author':author},//要发送的数据（参数）格式为{'val1':"1","val2":"2"}
			dataType: "json",//后台处理后返回的数据格式
			success:function(data){
//				alert(JSON.stringify(data))

					$('<div>').appendTo('body').addClass('alert alert-success').html('保存成功').show().delay(1500).fadeOut();
					window.location.href="{:U('WebApp/QqBooks/qqbook')}";


			}
		})

	}
	function back(){
		window.history.back(-1);
	}

	$('.insert_choose').click(function(){
		$('.insert').css('display','none');
		$(this).siblings().css('display','block');
	})



	$('.center_main').click(function(){
		$('.cover').css('display','none');
		$(this).siblings().css('display','block');
	})
	$('.shade_choose').click(function(){
		$('.shade').css('display','none');
		$(this).siblings().css('display','block');
	})
</script>
</html>